import { connect } from 'dva';
import React, { PureComponent } from 'react';
import { Tag } from 'antd';
import { TableC } from '../../../comps';
import { findTitleByValue } from '@/src/utils/utils';
import 'moment/locale/zh-cn';

@connect(({ tenantManageM, userM: user, loading, pressureReportM }) => ({
  tenantManageM,
  user,
  loading: loading.effects['tenantManageM/Search'],
  pressureReportM,
}))
export default class TableForm extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {};
  }

  // 表格页码排序改变调用
  handleTableChange = (pagination) => {
    const { changeReset } = this.props;
    const { current, pageSize } = pagination;
    changeReset(current, pageSize);
  };

  componentDidMount() {
    this.props.dispatch({
      type: 'pressureReportM/getScenes',
      payload: {},
    });
    this.props.dispatch({
      type: 'pressureReportM/getTemplate',
      payload: {},
    });
  }

  render() {
    const { templateList = [], sceneList = [] } = this.props.pressureReportM;
    const { data, onEditFrom, onDeleteFrom, currentPage, numInPage, loading } = this.props;
    const columns = [
      {
        title: '租户账户',
        dataIndex: 'code',
        key: 'code',
      },
      {
        title: '租户名称',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '交收方式',
        dataIndex: 'unsecuredAutomaticSettlement',
        key: 'unsecuredAutomaticSettlement',
        render: (text) => {
          if (text === null || text === undefined) {
            return '--';
          }
          return text == '1' ? '自动交收' : '手动交收';
        },
      },
      {
        title: '工作台',
        dataIndex: 'workbenchConfiguration',
        key: 'workbenchConfiguration',
        width: 270,
        render: (text) => {
          if (text === null || text === undefined) {
            return '--';
          }
          const workbenchConfigurationArr = text.split(',');
          return (
            <div>
              {workbenchConfigurationArr.map((v) => {
                return (
                  <Tag color='geekblue' style={{ marginRight: 5 }}>
                    {v === '1' ? '穿透工作台' : v === '2' ? '非标工作台' : v === '3' ? 'Barra工作台' : '--'}
                  </Tag>
                );
              })}
            </div>
          );
        },
      },
      {
        title: '省份',
        dataIndex: 'province',
        key: 'province',
      },
      {
        title: '城市',
        dataIndex: 'city',
        key: 'city',
      },
      {
        title: '管理员账户',
        dataIndex: 'userAccount',
        key: 'userAccount',
      },
      {
        title: '压测情景',
        dataIndex: 'reportScenario',
        key: 'reportScenario',
        render: (text) => {
          const showName = findTitleByValue(text, sceneList);
          return showName;
        },
      },
      {
        title: '压测模板',
        dataIndex: 'reportTemplate',
        key: 'reportTemplate',
        render: (text) => {
          const showName = findTitleByValue(text, templateList);
          return showName;
        },
      },
      {
        title: '操作',
        dataIndex: 'operate',
        key: 'operate',
        type: 'operate',
        operates: [
          {
            title: '编辑',
            onClick: (record) => onEditFrom(record),
          },
          {
            title: '删除',
            onClick: (record) => onDeleteFrom(record),
          },
        ],
      },
    ];

    return (
      <TableC columns={columns} dataSource={data} selfScrollY={true} onChange={this.handleTableChange} current={currentPage} pageSize={numInPage} loading={loading} rowKey='id' />
    );
  }
}
